<!-- 分类 -->
<template>
	<view class="container">
		<view class="content">
			<view class="item" v-for="item in list" :key="item.value">
				<image class="icon" :src="item.icon" mode="widthFix"></image>
				<text class="label">{{item.label}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const list = [
		{ icon: '/static/images/index-customer/category01.svg', label: '农药', value: '1' },
		{ icon: '/static/images/index-customer/category02.svg', label: '肥料', value: '2' },
		{ icon: '/static/images/index-customer/category03.svg', label: '农服', value: '3' },
	];
</script>

<style lang="scss" scoped>
	.container {
		padding: 38rpx 25rpx 0;
		box-sizing: border-box;

		.content {
			display: flex;
			justify-content: space-around;
			height: 200rpx;
			background: rgba(255, 255, 255, 0.84);
			border-radius: 25rpx;
			backdrop-filter: blur(30rpx);
			padding: 30rpx 20rpx 0;
			box-sizing: border-box;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.icon {
					width: 92rpx;
					height: 92rpx;
					transition: transform 0.2s;
				}
				
				&:active .icon {
					transform: scale(0.9);
				}
				
				.label {
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					line-height: 1.5;
					margin-top: 17rpx;
				}
			}
		}
	}
</style>